<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="page-content">
      <view class="content-header">
        <view class="shopInfo">
          <view>{{ $t("facePay.merchant") }}</view>
          <view>{{ store_info.name }}</view>
        </view>
        <image :src="store_info.logo" />
      </view>
      <view class="content-body">
        <!-- <view class="title">{{ $t("facePay.setMoney") }}</view> -->
        <view class="input-section">
          <view>金额</view>
          <input :focus="firstFocus" v-model="money" type="digit" />
          <text>元</text>
        </view>
        <!-- 优惠券 -->
        <view
          v-if="coupon_list && coupon_list.length"
          class="invoice-one"
          @click="couponPopupShow"
        >
          <view class="invoice-one-left">
            <view>{{ $t("common.coupon") }}</view>
            <!-- <view>已选推荐优惠</view> -->
          </view>
          <view>
            <view v-if="conpon_data && conpon_data.sub_price">
              {{ $t("goods.discountTitle") }}￥{{ conpon_data.sub_price }}
            </view>
            <view v-else>{{ $t("common.chooseCoupon") }}</view>
            <i
              class="iconfont icon-arrow-right"
              style="color: #cdcdcd; font-size: 22rpx"
            ></i>
          </view>
        </view>
        <!-- <view class="money" v-if="total">余额：{{ total }}</view> -->
        <view class="hold-height"></view>
        <view
          v-if="!isLogin"
          class="content-foot"
          :style="[btnStyle]"
          @click="getLogin"
          >确认付款</view
        >
        <view :class="['content-foot', money ? 'on' : '']" v-else>
          <button @click="show = true" :style="[btnStyle]">确认付款</button>
          <!-- <button
            v-if="current_env == 'weixin'"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
            :style="[btnStyle]"
          >
            确认付款
          </button> -->
          <!-- <button :style="[btnStyle]" @click="$utils.toUrl('/login/login/login_page','redirectTo')">确认付款</button> -->
        </view>
      </view>
    </view>
    <!-- 优惠券内容 -->
    <couponPopup
      ref="coupon_popup"
      @selectCouponCb="selectCouponCb"
      :couponList="coupon_list"
    >
    </couponPopup>
    <!-- <login-modal v-if="showLoging"></login-modal> -->

    <u-popup
      v-model="show"
      mode="bottom"
      safe-area-inset-bottom
      closeable
      :border-radius="36"
    >
      <view class="pop">
        <view class="title">确认支付</view>

        <scroll-view scroll-y>
          <view class="price">
            <view class="new_price">
              <text>¥</text>
              {{
                newMoney(money - take_price < 0 ? money : money - take_price)
              }}
            </view>
          </view>

          <view
            class="popItem payType"
            @click="isUseBalance = !isUseBalance"
            v-if="use_balance === 1"
          >
            <view class="icon">
              <i class="iconfont icon-consumption-fill"></i>
              <text>余额支付</text>
              <text class="s1" v-if="total">(剩余￥{{ total }})</text>
            </view>
            <view class="check">
              <i v-if="isUseBalance" class="iconfont icon-success-fill"></i>
              <i v-else class="iconfont icon-xuanzekuangmoren"></i>
            </view>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <!-- #endif -->
          <view v-if="pay_type_list.length">
            <div class="font-w-600 u-m-t-20">组合支付</div>
            <view
              v-for="item in pay_type_list"
              :key="item.payment"
              class="popItem payType"
              @click="onCheckPayType(item.payment)"
            >
              <view class="icon u-m-l-6">
                <image
                  :src="item.icon"
                  mode="aspectFit"
                  style="width: 36rpx; height: 36rpx"
                />
                <text class="u-m-l-20">{{ item.name }}</text>
              </view>
              <view class="check">
                <i
                  v-if="item.payment == payment"
                  class="iconfont icon-success-fill"
                ></i>
                <i v-else class="iconfont icon-xuanzekuangmoren"></i>
              </view>
            </view>
          </view>

          <view class="popItem" v-if="recharge && recharge.length">
            <view class="subTit"> 推荐优惠支付 </view>
            <scroll-view scroll-x class="rechargeList">
              <view
                :class="['item', active === index ? 'active' : '']"
                v-for="(item, index) of recharge"
                :key="index"
                @click="changeActive(index, item)"
              >
                <view class="box">
                  <view class="tit">{{ item.name }}</view>
                  <view class="p">
                    <text>￥</text>
                    <text class="s1">{{ getMoney(item.pay_price)[0] }}</text>
                    <text>.{{ getMoney(item.pay_price)[1] }}</text>
                  </view>
                  <view class="givePrice">赠送{{ item.send_price }}</view>
                  <view class="givePrice">赠积分{{ item.send_integral }}</view>
                </view>
              </view>
            </scroll-view>
            <view class="ts">*充值成功后，自动扣除实际支付金额。</view>
          </view>
          <view class="hrone"></view>
          <template v-if="show_saas_alliance_coupon">
            <view v-if="take_price > 0 || send_price" class="take_price">
              <view class="take-left">
                <span>券</span>
                <span>联盟券总数{{ user_price }}元</span>
              </view>
              <view class="take-right">
                <p v-if="money - take_price >= 0">
                  本单联盟券最高 <span>可抵扣{{ newMoney(take_price) }}元</span>
                </p>
                <span v-else>联盟券超过当前支付金额,不可抵扣</span>
              </view>
              <view class="take-right">
                <p v-if="send_price >= 0">
                  本单可获得 <span>联盟券{{ newMoney(send_price) }}元</span>
                </p>
              </view>
            </view>
            <view class="hrtwo"></view>
          </template>
        </scroll-view>
        <view class="popBtn" @click="handleConfirm">{{ popBtnText }}</view>
      </view>
    </u-popup>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { mapGetters } from "vuex";
import couponPopup from "../components/coupon/popup";

export default {
  components: {
    Shenhe,
    couponPopup
  },
  data() {
    return {
      showLoging: false,
      money: "",
      timer: null,
      // #ifdef MP-WEIXIN
      payment: "", // 当面付，默认为微信支付
      // #endif
      // #ifdef MP-ALIPAY
      payment: 4, // 当面付，默认为微信支付
      // #endif
      order_id: "",
      store_info: {},
      isLogin: false,
      total: 0,
      show: false,
      use_balance: 0,
      isUseBalance: false,
      recharge: [],
      popBtnText: "确认支付",
      coupon_list: [],
      active: "",
      conpon_data: {},
      firstFocus: false,
      user_price: "", //用户余额
      take_price: 0, //联盟券抵扣
      send_profit: "", //返回联盟券百分比
      take_profit: "", //抵扣百分比
      send_price: "0", //向后台返回的send_price
      unionAll: "", //联盟券总数
      coupon_id: null,
      store_price: "", //最高可返联盟券数量
      show_saas_alliance_coupon: false // 是否显示联盟券
    };
  },
  watch: {
    money: {
      handler(newVal) {
        if (newVal) {
          this.send_price = newVal * this.send_profit;
          this.take_price = newVal * this.take_profit || 0;
          if (this.take_price > this.user_price) {
            this.take_price = this.user_price;
          }
          // if(this.send_price>this.store_price){
          // 	this.send_price=this.store_price
          // }
        }
      },
      deep: true,
      immediate: true
    },
    getStoreId: {
      handler(e) {
        this.$nextTick(() => {
          this.getStore();
        });
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    ...mapGetters(["getStoreId"]),

    current_env: function () {
      // #ifdef MP-WEIXIN
      return "weixin";
      // #endif
      // #ifdef MP-ALIPAY
      return "alipay";
      // #endif
      // #ifdef H5
      return "h5";
      // #endif
      // #ifdef MP-TOUTIAO
      return "bytedance";
      // #endif
    },

    newMoney() {
      return (money) => {
        return parseFloat(money).toFixed(2);
      };
    },
    btnStyle() {
      if (this.money) {
        return {
          background: "#F0250E"
        };
      } else {
        return {
          background: "#f0f0f0"
        };
      }
    },
    getMoney() {
      return (pay_price) => {
        return pay_price.split(".");
      };
    },
    // 手动配置支付列表当前尽在微信环境下使用
    pay_type_list() {
      let arr = [];
      // #ifdef MP-WEIXIN
      if (this.stores?.payment.adapay_wx?.value) {
        arr.push({
          name: "Adapay支付",
          payment: 101,
          icon: this.asyncImgs.images.wx_pay_icon
        });
      }
      if (this.stores?.payment.yunst_wechat_pay?.value) {
        arr.push({
          name: this.stores.payment.yunst_wechat_pay.text,
          payment: 13,
          icon: this.asyncImgs.images.yunst_pay_icon
        });
      }
			if (this.stores?.payment.wechat?.value) {
				arr.push({
					name: this.$t("common.payMethod1"),
					payment: 1,
					icon: this.asyncImgs.images.wx_pay_icon
				});
			}
      // #endif
      // #ifdef MP-ALIPAY
      arr.push({
        name: this.$t("common.payMethod4"),
        payment: 4,
        icon: this.asyncImgs.images.alipay_icon
      });
      // #endif

      return arr;
    }
  },

  onLoad() {
    this.$nextTick(() => {
      setTimeout(() => {
        // #ifdef MP
        const platform = uni.getSystemInfoSync().platform;
        if (platform === "ios") return;
        // #endif
        this.firstFocus = true;
      }, 100);
    });
  },
  onShow() {
    this.getStore();
  },
  methods: {
    // 展示优惠券弹框组件
    couponPopupShow() {
      this.$refs.coupon_popup.setShowPopup();
    },

    // 点击付款按钮
    handleConfirm() {
      const that = this;
      var pay_fee = this.money - this.take_price;
      if (pay_fee <= 0) {
        this.take_price = 0;
      }
      let { recharge, active, isUseBalance } = this,
        param = {
          // pay_fee: this.money - this.take_price,
          pay_fee: this.money,
          type: "weixin",
          is_balance: isUseBalance ? 1 : 0,
          coupon_id: this.coupon_id,
          send_price: this.send_price ? this.send_price : 0,
          take_price: this.take_price ? this.take_price : 0,
          coupon_id: this.coupon_id ? this.coupon_id : "",
          // #ifdef MP-WEIXIN
          pay_type: this.payment
          // #endif
        };
      if (this.active !== "") {
        param.recharge_id = recharge[active].id;
      }

      // #ifdef MP-WEIXIN
      param.type = "weixin";
      // #endif
      // #ifdef MP-ALIPAY
      param.type = "alipay";
      // #endif

      if (param.pay_type == 13) {
        param.type = "yunst";
      }

      uni.login({
        async success(loginRes) {
          if (loginRes.code) {
            let extConfig = uni.getExtConfigSync();
            param.code = loginRes.code;
            param.mini_id =
              extConfig && extConfig.mini_id ? extConfig.mini_id : 0;

            // that.popBtnText = "支付中...";
            const res = await that.$allrequest.facePay.facePaySub(param, true);

            if (res.code == 0) {
              if (res.data.is_pay) {
                that.$utils.showModal("提示", "余额支付成功~", false, () => {
                  uni.navigateTo({
                    url: "/face-pay/face-pay/payOutRes?id=" + res.data.order_no
                  });
                  that.show = false;
                  that.money = "";
                  that.active = "";
                  that.popBtnText = "确认支付";
                });
                return;
              }
              let payData = res;

              // #ifdef MP-WEIXIN
              uni.requestPayment({
                provider: "wxpay",
                orderInfo: payData.res,
                timeStamp: payData.data.timeStamp,
                nonceStr: payData.data.nonceStr,
                package: payData.data.package,
                signType: payData.data.signType,
                paySign: payData.data.paySign,
                success: function (res) {
                  uni.navigateTo({
                    url:
                      "/face-pay/face-pay/payOutRes?id=" + payData.data.order_no
                  });
                },
                fail(res) {
                  uni.showToast({
                    title: "订单尚未支付",
                    icon: "none",
                    duration: 2000
                  });
                },
                complete: () => {
                  that.popBtnText = "确认支付";
                }
              });
              // #endif
              // #ifdef MP-ALIPAY
              uni.requestPayment({
                provider: "alipay",
                orderInfo: payData.data.trade_no,
                complete: function (res) {
                  if (res.resultCode == 9000) {
                    uni.navigateTo({
                      url:
                        "/face-pay/face-pay/payOutRes?id=" +
                        payData.data.order_no
                    });
                    that.show = false;
                    that.money = "";
                    that.active = "";
                  } else {
                    uni.showToast({
                      title: "订单尚未支付",
                      icon: "none",
                      duration: 2000
                    });
                  }
                  that.popBtnText = "确认支付";
                }
              });
              // #endif
            }
          }
        }
      });
    },
    // 获取商户信息
    async getStore(fn) {
      const res = await this.$allrequest.facePay.getStoreDetail();
      if (res.code == 0) {
        this.user_price = res.data.user_price;
        this.store_price = res.data.store_price;
        this.send_profit = res.data.new_send_profit;
        this.take_profit = res.data.new_take_profit;
        this.unionAll = res.data.store_price;
        this.use_balance = res.data.use_balance;
        this.show_saas_alliance_coupon = res.data.show_saas_alliance_coupon;
        this.coupon_list = res.data.coupon_list;
        fn && fn();
        if (res.data.user && res.data.user.money) {
          this.total = parseFloat(res.data.user.money);

          if (this.total && this.use_balance) {
            this.isUseBalance = true;
          }
        }

        this.recharge = res.data.recharge;
        if (res.data.reLogin) {
          this.$store.commit(
            "setNoLoginTabarPath",
            `/face-pay/face-pay/payOut`
          );
          this.$store.commit("setRouteType", "redirectTo");
          this.isLogin = false;

          // #ifdef MP-WEIXIN
          uni.setStorageSync("wx_login_code", await this.getCode());
          // #endif
        } else {
          this.isLogin = true;
        }
        this.store_info = res.data.store_info;
      }
    },

    changeActive(index, item) {
      let { money, total } = this,
        totalPrice =
          parseFloat(total) +
          parseFloat(item.send_price) +
          parseFloat(item.pay_price);

      if (parseFloat(money) > totalPrice) {
        uni.showToast({
          title: "该方式不足以充值请选择其他选项",
          icon: "none",
          duration: 2000
        });
        return;
      }

      if (this.active === index) {
        this.active = "";
        return;
      }

      // #ifdef MP-WEIXIN
      if (!this.payment) this.payment = 1;
      // #endif

      this.active = index;
    },

    getLogin() {
      if (this.isLogin) {
        this.showLoging = true;
        uni.setStorageSync("payPrice", this.money);
        return;
      } else {
        this.$utils.toUrl("/login/login/login_page", "redirectTo");
      }

      // #ifdef MP-WEIXIN
      // if (this.money > this.total && !this.payment) {
      //   this.payment = 1;
      // }
      // #endif
      // this.show = true;
    },

    onGetAuthorizeByAlipay: function (e) {
      // #ifdef MP-ALIPAY
      let mini_id = "",
        isvAppid = "";
      let isv_ = uni.getExtConfigSync ? uni.getExtConfigSync() : {};
      if (isv_.shopId) {
        isvAppid = isv_.shopId;
      }
      if (isvAppid) {
        uni.login({
          provider: "alipay",
          scopes: "auth_user",
          success: (loginRes) => {
            uni.showLoading({
              title: this.$t("login.inLogin")
            });
            const share_user_id = uni.getStorageSync("parent_user_id");
            const page_type = uni.getStorageSync("page_type");

            this.$allrequest.user
              .auth_phone_alipay({
                authCode: loginRes.authCode,
                share_user_id: share_user_id,
                page_type
              })
              .then((result) => {
                uni.showToast({
                  title: result.msg,
                  icon: "none",
                  duration: 1000
                });
                if (result.code == 0) {
                  setTimeout(() => {
                    this.$store.commit("setLoginModalStatus", false);
                    uni.setStorageSync("token", result.data.access_token);
                    uni.setStorageSync("userInfo", result.data);
                    this.$store.commit("setUserInfo", result.data);
                    this.getStore(() => {
                      this.show = true;
                    });
                  }, 1000);
                }
              })
              .catch((error) => {})
              .then(() => {
                uni.hideLoading();
              });
          }
        });
      } else {
        my.getPhoneNumber({
          success: (res) => {
            let encryptedData = res.response;
            uni.login({
              provider: "alipay",
              scopes: "auth_base",
              success: (loginRes) => {
                uni.showLoading({
                  title: this.$t("login.inLogin")
                });
                const share_user_id = uni.getStorageSync("parent_user_id");
                const page_type = uni.getStorageSync("page_type");

                this.$allrequest.user
                  .auth_phone_alipay({
                    response: encryptedData,
                    authCode: loginRes.authCode,
                    share_user_id: share_user_id,
                    page_type
                  })
                  .then((result) => {
                    uni.showToast({
                      title: result.msg,
                      icon: "none",
                      duration: 1000
                    });
                    if (result.code == 0) {
                      setTimeout(() => {
                        this.$store.commit("setLoginModalStatus", false);
                        uni.setStorageSync("token", result.data.access_token);
                        uni.setStorageSync("userInfo", result.data);
                        this.$store.commit("setUserInfo", result.data);
                        this.getStore(() => {
                          this.show = true;
                        });
                      }, 1000);
                    }
                  })
                  .catch((error) => {})
                  .then(() => {
                    uni.hideLoading();
                  });
              }
            });
          },
          fail: (res) => {
            uni.showToast({
              title: this.$t("login.failPhone"),
              icon: "none",
              duration: 1000
            });
          }
        });
      }

      //#endif
    },
    onAuthError: function (e) {
      uni.showToast({
        title: this.$t("login.failPhone"),
        icon: "none",
        duration: 1000
      });
    },
    getCode: function () {
      return new Promise((reslove) => {
        uni.login({
          provider: "weixin",
          success(res) {
            reslove(res.code);
          }
        });
      });
    },
    getPhoneNumber: async function (e) {
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        const share_user_id = uni.getStorageSync("parent_user_id");
        const page_type = uni.getStorageSync("page_type");

        const wx_code = uni.getStorageSync("wx_login_code");
        const params = {
          ...e.detail,
          _platform: "wx",
          code: wx_code,
          share_user_id: share_user_id,
          page_type
        };
        uni.showLoading({
          title: this.$t("login.inLogin")
        });
        let result = await this.$allrequest.user.auth_phone(params);
        uni.hideLoading();
        uni.showToast({
          title: result.msg,
          icon: "none",
          duration: 1000
        });
        if (result.code == 0) {
          setTimeout(() => {
            this.$store.commit("setLoginModalStatus", false);
            uni.setStorageSync("token", result.data.access_token);
            uni.setStorageSync("userInfo", result.data);
            this.$store.commit("setUserInfo", result.data);

            this.getStore(() => {
              this.show = true;
            });
          }, 1000);
        }
      } else {
        uni.showToast({
          title: this.$t("login.failPhone"),
          icon: "none",
          duration: 1000
        });
      }
    },
    // 选择优惠券回调
    selectCouponCb(e) {
      this.coupon_id = e.coupon.user_coupon_id;
      // this.$set(this.mchItemData, "picker_coupon", e.coupon);
      this.conpon_data = e.coupon;
    },
    onCheckPayType(pay_type) {
      if (pay_type == this.payment) {
        if (this.money > this.total) {
          this.$utils.toast("余额不足,需组合支付");
        } else if (this.active != "") {
          this.$utils.toast("已选支付套餐不能取消");
        } else {
          this.payment = "";
        }
      } else {
        this.payment = pay_type;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f2f2;
  font-family: PingFang SC;

  .page-content {
    .content-header {
      width: 100%;
      border-radius: 14rpx 14rpx 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 84rpx 30rpx 42rpx;

      .shopInfo {
        font-size: 34rpx;
        font-weight: 500;
        color: #191919;

        view:last-child {
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
          margin-top: 18rpx;
        }
      }

      image {
        width: 96rpx;
        height: 96rpx;
        background: #ffffff;
        border-radius: 14rpx;
      }
    }

    .content-body {
      width: 100%;
      background: #ffffff;
      border-radius: 20rpx;
      padding: 58rpx 50rpx 108rpx 50rpx;
      overflow: hidden;
      .invoice-one {
        display: flex;
        margin-top: 20rpx;
        justify-content: space-between;
        align-items: center;

        > view:last-child {
          display: flex;
          align-items: center;

          image {
            margin-left: 20rpx;
            width: 12rpx;
            height: 20rpx;
          }
        }

        .invoice-one-left {
          display: flex;
        }
      }
      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: #191919;
      }

      .addMargin {
        margin-top: 47rpx;
      }

      .addPadding {
        padding-top: 47rpx;
      }

      .noPadding {
        padding-top: 0;
      }

      .hold-height {
        height: 47rpx;
        width: 100%;
      }

      .input-section {
        display: flex;
        align-items: center;
        font-size: 34rpx;
        font-weight: 500;
        color: #191919;
        border-bottom: 1rpx solid #f8f8f8;

        view {
          width: 70rpx;
          text-align: left;
        }

        input {
          margin: 0 20rpx;
          flex: 1;
          font-size: 64rpx;
          font-weight: 500;
          color: #191919;
          height: 120rpx;
          text-align: right;
        }

        text {
          color: #8c8c8c;
        }
      }

      .remark {
        margin-top: 39rpx;
        padding-bottom: 48rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        display: flex;
        justify-content: space-between;
        align-items: center;

        image {
          width: 9rpx;
          height: 16rpx;
        }
      }
    }

    .content-foot {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 80rpx;
      width: 100%;
      height: 88rpx;
      border-radius: 45rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #fff;
      overflow: hidden;

      button {
        color: #fff;
        margin: 0 !important;
        width: 100%;
        padding: 0 !important;
        background: #7d7d7d !important;
        border-radius: 45rpx;
        border: 0 !important;
        font-size: 30rpx !important;
        height: 100rpx;
        line-height: 100rpx;

        &::after {
          border: none;
        }
      }

      &.on {
        button {
          background: #f0250e !important;
        }
      }
    }
  }
}

.hrone {
  height: 4rpx;
  width: 100%;
  background: #f4f5f7;
  margin-bottom: 20rpx;
}

.hrtwo {
  height: 4rpx;
  width: 100vw;
  background: #f4f5f7;
  margin-bottom: 6rpx;
}

.take_price {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fbeded;
  justify-content: center;
  padding: 40rpx 30rpx;
  border-radius: 30rpx;
  margin-bottom: 50rpx;

  .take-left {
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;

    span {
      &:first-child {
        display: block;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        background: #f0250e;
        border-radius: 8rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
        margin-right: 10rpx;
      }
    }
  }

  .take-right {
    p {
      display: flex;
      align-items: center;
      font-weight: bold;

      span {
        color: #f45525;
      }
    }
  }
}

.money {
  padding: 20rpx 0;
  color: #ff0000;
}

.pop {
  padding: 0 36rpx 30rpx;

  .title {
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  > scroll-view {
    min-height: 35vh;
    max-height: 80vh;
  }
  .price {
    // padding-bottom: 30rpx;
    display: flex;
    flex-direction: column;

    .new_price {
      width: 100%;
      text-align: center;
      font-weight: bold;
      font-size: 52rpx;

      text {
        margin: 0 10rpx 8rpx 0;
        font-size: 52rpx;
        width: 100%;
      }
    }
  }

  .ts {
    padding: 20rpx 0 30rpx;
    font-size: 24rpx;
    color: #f0250e;
  }

  .popBtn {
    height: 76rpx;
    background: #f0250e;
    border-radius: 32px;
    color: #fff;
    text-align: center;
    font-size: 28rpx;
    line-height: 76rpx;
    font-weight: bold;
  }
}

.popItem {
  border-top: 2rpx solid #f8f8f8;
}

.payType {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;

  .icon {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;

    text {
      font-size: 28rpx;
      color: #262626;
    }

    .s1 {
      margin-left: 10rpx;
      color: #8c8c8c;
    }

    .iconfont {
      margin-right: 10rpx;
      font-size: 52rpx;
      color: #ff9e1f;
    }
  }

  .check {
    margin-left: 20rpx;

    .iconfont {
      font-size: 40rpx;
    }

    .icon-xuanzekuangmoren {
      color: #707070;
    }

    .icon-success-fill {
      color: #f0250e;
    }
  }
}

.subTit {
  padding: 30rpx 0 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.rechargeList {
  white-space: nowrap;
  width: 100%;

  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }

  .item {
    display: inline-block;
    margin-right: 20rpx;
    width: 208rpx;
    height: 200rpx;
    border: 2rpx solid #eaeaea;
    border-radius: 20rpx;
    vertical-align: middle;

    &.active {
      border-color: #ffa655;
      background: #fff5e7;
    }

    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .tit {
      text-align: center;
      overflow: hidden;
      font-size: 30rpx;
      color: #262626;
    }

    view {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }

    .p {
      padding-top: 6rpx;
      color: #f0250e;
      font-size: 30rpx;
      font-weight: bold;

      .s1 {
        font-size: 48rpx;
        line-height: 1.1;
      }
    }

    .givePrice {
      font-size: 22rpx;
      color: #8c8c8c;
    }
  }
}
</style>
